/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="account_info">
			<view class="header_image">
				<image :src="userInfo.head_pic?hostUrl+userInfo.head_pic:defaultImg" role="img"></image>
			</view>
			<view class="shop_title">{{userInfo.nickname}}</view>
			<navigator class="add" url="/pages/distribut/good_list/good_list" role="navigation">
				<view>添加商品</view>
			</navigator>
			<view class="info_data">
				<view class="products">
					<navigator class="sum" url="/pages/distribut/distribut_list/distribut_list" role="navigation">{{surveyCount.had_add_goods_num}}</navigator>
					<navigator class="writing" url="/pages/distribut/distribut_list/distribut_list" role="navigation">我的商品</navigator>
				</view>
				<view class="line"></view>
				<view class="products">
					<navigator class="sum" url="/pages/distribut/good_list/good_list" role="navigation">{{surveyCount.no_add_goods_num}}</navigator>
					<navigator class="writing" url="/pages/distribut/good_list/good_list" role="navigation">待上架商品</navigator>
				</view>
			</view>
		</view>
		<view class="product_info clearfix">
			<block v-for="(item,index) in goodslist" :key="index">
				<navigator class="product_list" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id" role="navigation">
					<view class="product_image">
						<view class="product_image_title">TPshop</view>
						<view class="product_image_content">开源商城</view>
						<image :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType" role="img"></image>
					</view>
					<view class="product_list_title">{{item.goods_name}}</view>
					<view class="activities clearfix">
						<view class="activity">{{item.is_free_shipping==1?'包邮':'不包邮'}}</view>
					</view>
					<view class="product_data clearfix">
						<view class="price">
							￥
							<view>{{filter(item.shop_price)}}</view>
						</view>
						<view class="amount">已售{{item.share_sales_num}}件</view>
					</view>
				</navigator>
			</block>
			
		</view>
	</view>
</template>

<script>
	import {getUserInfo,getBeenAdd,getSurveyCount} from "@/api/api.js";
	import common from "@/common/common.js";
	import config from "@/api/config.js";
	import {mapState,mapMutations} from 'vuex';
	const globalData=getApp().globalData//从app.vue获取用户信息
	export default {
		data() {
			return {
				userInfo:"",
				hostUrl:config.host,//路径前缀
				defaultImg:"common/user68.jpg",
				surveyCount:'',//分销商品概况
				goodslist:"",
				total:"",//条数
				params:{
					// order_by:"addtime",
					// asc:true,
					// is_distribute:true,//已添加
					size:10,
				}
			};
		},
		computed: {
			...mapState(['hasLogin','imgType','goodsImgHeight','goodsImgWidth'])
		},
		onLoad(){
			
			if(this.hasLogin){

				this.getBeenAdd(this.params)
				this.getSurveyCount()
			}else{
				common.islogin()
			}
		},
		onShow(){
			
			if(this.hasLogin){
				this.getUser()
				
				
				this.getBeenAdd(this.params)
				this.getSurveyCount()
			}else{
				common.islogin()
			}
		},
		methods:{
			...mapMutations(['getUser']),
			/*用户信息*/
			
			/*用户分销商品概况*/ 
			getSurveyCount(){
				getSurveyCount().then(res=>{
					if(res){
						this.surveyCount=res;
					}
					console.log(res)
				})
			},
			/*用户已添加的分销商品*/ 
			getBeenAdd(params){
				getBeenAdd(params).then(res=>{
					console.log(res)
					if(res){
						this.goodslist=res.records;
						this.total=res.total
					}
				})
			},
			/*保留两位小数*/
			filter(e) {
				let num = parseFloat(e).toFixed(2)
				return num;
			},
			onReachBottom(){//下拉加载数据
				console.log("滚动加载")
				if(this.goodslist.length===this.total){
					common.toast("none","加载完了",2000)
					 return;
				}
				
				this.params.size+=10;
				
				this.getBeenAdd(this.params);
				
				
			},
		}
	}
</script>

<style lang="scss">
	/**index.wxss**/
	page {
		background-color: #f5f5f5;
	}

	.clearfix:after {
		content: '.';
		display: block;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		clear: both;
	}

	.account_info {
		height: 300rpx;
		overflow: hidden;
		color: #fff;
		position: relative;
		background-image: linear-gradient(0deg,
			#f62f2f 0%,
			#f7542e 100%),
			linear-gradient(#f84444,
			#f84444);
		background-blend-mode: normal,
			normal;
	}

	.account_info .header_image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin: 34rpx 0 0 34rpx;
		overflow: hidden;
	}

	.add {
		position: absolute;
		font-size: 22rpx;
		width: 125rpx;
		height: 46rpx;
		border-radius: 23rpx;
		border: solid 2rpx #ffffff;
		top: 39rpx;
		right: 31rpx;
		line-height: 46rpx;
		text-align: center;
	}

	.account_info .header_image image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.account_info .shop_title {
		font-size: 30rpx;
		position: absolute;
		top: 78rpx;
		left: 169rpx;
	}

	.info_data {
		display: flex;
		justify-content: space-around;
	}

	.account_info .info_data .products,
	.account_info .info_data .new,
	.account_info .info_data .sales {
		text-align: center;
		margin-top: 75rpx;
		box-sizing: border-box;
		height: 30rpx;
	}

	.account_info .info_data .sales {
		border-right: 0;
	}

	.account_info .info_data>view>.sum {
		margin-top: -17rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 42rpx;
		margin-bottom: 12rpx;
	}

	.account_info .info_data>view>.writing {
		font-size: 22rpx;
	}

	.line {
		width: 2rpx;
		height: 30rpx;
		background-color: #ffd2d2;
		opacity: 0.8;
		margin-top: 75rpx;
	}

	.product_info {
		margin-top: 20rpx;
		margin-bottom: 100rpx;
	}

	.product_info .product_list {
		float: left;
		width: 345rpx;
		height: 494rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background: #ffffff;
		overflow: hidden;
	}

	.product_info .product_list:nth-child(2n) {
		/* padding-left: 5rpx; */
	}

	.product_info .product_list .product_image {
		width: 345rpx;
		height: 345rpx;
		background-color: #eaeaea;
		position: relative;
		overflow: hidden;
	}

	.product_info .product_list .product_image .product_image_title {
		color: #fff;
		font-size: 60rpx;
		margin-top: 116rpx;
		text-align: center;
	}

	.product_info .product_list .product_image .product_image_content {
		text-align: center;
		margin-top: 5rpx;
		font-size: 36rpx;
		color: #fff;
		letter-spacing: 5rpx;
	}

	.product_info .product_list .product_image image {
		position: absolute;
		top: 0;
		left: 0;
		width: 345rpx;
		height: 345rpx;
	}

	.product_info .product_list .product_list_title {
		font-size: 26rpx;
		color: #333333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		height: 50rpx;
		line-height: 50rpx;
		width: 320rpx;
		padding-left: 10rpx;
	}

	.product_info .product_list .activities {
		padding-left: 10rpx;
	}

	.product_info .product_list .activities .activity {
		float: left;
		padding: 2rpx 6rpx;
		border: 1rpx solid #ff3b3b;
		font-size: 20rpx;
		color: #ff3b3b;
		margin-right: 10rpx;
		border-radius: 3rpx;
	}

	.product_info .product_list .product_data {
		margin-top: 5rpx;
		padding-left: 10rpx;
		width: 320rpx;
	}

	.product_info .product_list .product_data .price {
		font-size: 22rpx;
		color: #ff3b3b;
		font-weight: bold;
		float: left;
	}

	.product_info .product_list .product_data .price>view {
		display: inline;
		font-size: 30rpx;
	}

	.product_info .product_list .product_data .amount {
		float: right;
		color: #999;
		font-size: 22rpx;
		padding-top: 7rpx
	}
</style>
